<template>
  <div class="app-container">
    <!--    <el-form :inline="true" @submit.native.prevent>-->
    <!--      <el-button-->
    <!--        v-if="checkPermission('BookStore2Vehicle.Create')"-->
    <!--        type="primary"-->
    <!--        style="float: right"-->
    <!--        @click="openCreateVehicleDialog"-->
    <!--      >-->
    <!--        <i class="el-icon-plus" />{{ $t('BookStore2[\'NewVehicle\']') }}-->
    <!--      </el-button>-->
    <!--    </el-form>-->
    <div class="clearfix" style="margin-bottom: 20px">
      <el-button
        v-if="checkPermission('BookStore2Vehicle.Create')"
        type="primary"
        style="float: right"
        @click="openCreateVehicleDialog"
      >
        <i class="el-icon-plus" />{{ $t('BookStore2[\'NewVehicle\']') }}
      </el-button>
    </div>
    <div v-for="(v, k) in vehicleGroups" :key="k" class="vehicle-group">
      <el-row>
        <el-col :span="4">
          <div>
            <el-image
              class="cus-image"
              :src="getVehicleBrandUrl(k)"
              fit="fill"
            />
          </div>
        </el-col>
        <el-col :span="20">
          <el-button v-for="v2 in v" :key="v2.id" class="vehicle-item" type="primary" plain @click="openDetailDialog(v2.id, v2.number, v2.brand)">
            {{ v2.number }}
          </el-button>
        </el-col>
      </el-row>
    </div>
    <create-or-edit-vehicle ref="createOrEditVehicle" :visible.sync="vehicleDialogVisible" :context="vehicleDialogCtx" />
    <vehicle-detail ref="vehicleDetail" :visible.sync="detailDialogVisible" :context="detailDialogCtx" />
  </div>
</template>

<script>
import CreateOrEditVehicle from '@/views/vehicle/components/createOrEditVehicle'
import VehicleDetail from '@/views/vehicle/components/vehicleDetail'
import { checkPermission } from '@/utils/abp'
import { getList } from '@/api/vehicle/vehicle'

export default {
  name: 'Vehicle2',
  components: { CreateOrEditVehicle, VehicleDetail },
  data() {
    return {
      vehicleGroups: {
      },
      list: null,
      listLoading: false,
      listContext: {
        skipCount: 0,
        maxResultCount: 1000
      },
      vehicleDialogCtx: {
        id: '',
        title: '',
        actionMode: ''
      },
      vehicleDialogVisible: false,
      detailDialogCtx: {
        id: '',
        title: '',
        actionMode: ''
      },
      detailDialogVisible: false
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    checkPermission,
    fetchData() {
      this.listLoading = true
      getList(this.listContext).then((response) => {
        this.list = response.items
        this.list.forEach(item => {
          if (!this.vehicleGroups[item.brand]) {
            this.$set(this.vehicleGroups, item.brand, [])
          }
          this.vehicleGroups[item.brand].push(item)
        })

        console.log(this.vehicleGroups)

        this.listLoading = false
      })
    },
    openCreateVehicleDialog() {
      this.vehicleDialogVisible = true
      this.vehicleDialogCtx = {
        title: this.$t('BookStore2[\'NewVehicle\']'),
        actionMode: 'create'
      }
    },
    openEditVehicleDialog(id) {
      this.vehicleDialogVisible = true
      this.vehicleDialogCtx = {
        title: this.$t('BookStore2[\'Edit\']'),
        actionMode: 'edit',
        id: id
      }
    },
    openDetailDialog(id, number, brand) {
      this.detailDialogVisible = true
      this.detailDialogCtx = {
        title: number,
        brand: this.getVehicleBrandUrl(brand),
        id: id
      }
    },
    getVehicleBrandUrl(brand) {
      // return require('../../assets/vehicle-brand/benz.png')
      switch (brand) {
        case 'Enum:VehicleBrand.BENZ':
          return require('../../assets/vehicle-brand/benz.png')
        case 'Enum:VehicleBrand.TESLA':
          return require('../../assets/vehicle-brand/tesla.png')
        case 'Enum:VehicleBrand.AUDI':
          return require('../../assets/vehicle-brand/audi.png')
        case 'Enum:VehicleBrand.BMW':
          return require('../../assets/vehicle-brand/bmw.png')
        case 'Enum:VehicleBrand.TOYOTA':
          return require('../../assets/vehicle-brand/toyota.png')
        case 'Enum:VehicleBrand.HONDA':
          return require('../../assets/vehicle-brand/honda.png')
        case 'Enum:VehicleBrand.VW':
          return require('../../assets/vehicle-brand/vw.png')
        case 'Enum:VehicleBrand.Dodge':
          return require('../../assets/vehicle-brand/dodge.png')
        case 'Enum:VehicleBrand.Ford':
          return require('../../assets/vehicle-brand/ford.png')

        default:
          return ''
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.vehicle-group {
  margin-bottom: 20px;
}
.vehicle-item {
  margin: 0 10px 10px 0;
  border-radius: 25px;
}
.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
  font-size:0;
}
.clearfix { *zoom:1;}
.cus-image {
  height: 60px;
  width: 60px;
}
</style>

